{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Home </title>

  <meta charset="utf-8">
  <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="">
  
  <!-- Google Fonts -->

  <!-- Css -->
   <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" />
   <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" />
   <link rel="stylesheet" href="{% static 'css/font-icons.css' %}" />
   <link rel="stylesheet" href="{% static 'css/sliders.css' %}" />
   <link rel="stylesheet" href="{% static 'css/style.css' %}" />
   <link rel="stylesheet" href="{% static 'css/main.css' %}">
  <!-- Favicons -->
  <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
  <link rel="shortcut icon" href="{% static 'img/apple-touch-icon.png' %}">
  <link rel="shortcut icon" href="{% static 'img/apple-touch-icon-72x72.png' %}">
  <link rel="shortcut icon" href="{% static 'img/apple-touch-icon-114x114.png' %}">

  <script type="text/javascript" src="{% static 'js/jquery-3.3.1.js' %}"></script>

  <!-- 加载温度的ajax-->
    <script type="text/javascript">

         var getting = {
             url : "testajax", //后台查询验证的方法
             dataTpye : "json",
             data : {

             },
             type : "get",
             success : function(msg) {
                var parsedJson = jQuery.parseJSON(msg);
                //console.log(parsedJson[0].fields.temp);
                $("#th").html('当前温度：'+parsedJson[0].fields.temp+'℃</br>'+'当前湿度：'+parsedJson[0].fields.hmui+'%');

             },
             error:function(){  //请求失败的回调方法
                alert("请求失败，请重试");
             }
         };
        window.setInterval(function(){$.ajax(getting)},3000);   //每三秒调用一次ajax
    </script>

</head>

<body>

  <!-- Preloader -->
  <div class="loader-mask">
    <div class="loader">
      "Loading..."
    </div>
  </div>

  <main class="main-wrapper">

    <!-- Navigation -->
    <header class="nav nav--transparent nav--always-fixed nav--sticky-on-mobile">
      <div class="nav__holder nav__holder--no-line" id="sticky-nav">

        <div class="container-fluid container-semi-fluid">
          <div class="flex-parent">

            <div class="nav__header clearfix">
              <!-- Logo -->
              <div class="logo-wrap">
                <a href="index" class="logo__link">
                  <img class="logo logo--dark" src="{% static 'img/logo_dark.png' %}" alt="logo">
                  <img class="logo logo--light" src="{% static 'img/logo_light.png' %}" alt="logo">
                </a>
                  <div id="th" style="color: red"></div>
              </div>
            </div> <!-- end nav-header -->

            <!-- Nav Open Icon -->
            <div class="nav__icon-wrap">
              <div id="nav__icon" class="nav__icon">
                <div class="nav__icon__inner">
                  <a href="#" id="nav__icon__trigger" class="nav__icon__trigger">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </a>
                </div>
              </div>
            </div>
        
          </div> <!-- end flex-parent -->
        </div> <!-- end container -->
      </div>


      <!-- Fullscreen Menu -->
      <div class="nav__overlay" id="nav__overlay">
        <div class="nav__overlay__menu">
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="index">Demos</a></li>
          </ul>
        </div>

        <!-- Nav Close Icon -->
        <div class="nav__icon-wrap">
          <div class="nav__icon">
            <div class="nav__icon__inner">
              <a href="#" id="nav__icon__close" class="nav__icon__trigger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </a>
            </div>
          </div>
        </div>

      </div>
    </header> <!-- end navigation -->
<div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >网站建设</a></div>

    <div class="content-wrapper oh">

      <!-- Fullpage -->
      <div id="fullpage" class="fullscreen-img">

        <!-- Hero -->
        <div class="section hero bg-img" style="background-image: url({% static 'img/hero/hero_6_1.jpg' %});">
          <div class="container">
            <div class="hero__outer">
              <div class="hero__inner">
                <h3 class="hero__subtitle--uppercase">creative agency</h3>
                <h1 class="hero__title hero--boxed--md hero--bold">We craft digital experience with knowledge, passion and intuitive ideas.</h1>
              </div>
            </div>

            <!-- Partners -->
            <div class="partners partners--overlay">
              <div class="container">
                <div class="row">
                  <div class="col-xs-3 col-xxs-6">
                    <a href="#">
                      <img src="{% static 'img/partners/partner_logo_light_1.png' %}" alt="">
                    </a>
                  </div>
                  <div class="col-xs-3 col-xxs-6">
                    <a href="#">
                      <img src="{% static 'img/partners/partner_logo_light_2.png' %}" alt="">
                    </a>
                  </div>
                  <div class="col-xs-3 col-xxs-6">
                    <a href="#">
                      <img src="{% static 'img/partners/partner_logo_light_3.png' %}" alt="">
                    </a>
                  </div>
                  <div class="col-xs-3 col-xxs-6">
                    <a href="#">
                      <img src="{% static 'img/partners/partner_logo_light_4.png' %}" alt="">
                    </a>
                  </div>
                </div>
              </div>
            </div> <!-- end partners -->


          </div>          
        </div> <!-- end hero -->

        <!-- Services -->
        <div class="section hero bg-img" style="background-image: url({% static 'img/hero/hero_6_2.jpg' %})">
          <div class="container pt-sm-60">

            <div class="heading-row text-center">
              <h2 class="heading heading--lg">What we do</h2>
              <p class="subheading white hidden-sm hidden-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet</p>
            </div>

            <div class="row">
              <div id="owl-services-slider" class="owl-carousel owl-theme">

                <div class="feature feature--transparent text-center">
                  <div class="feature__base feature--border">
                    <a href="#" class="feature__icon-holder">
                      <i class="pe-7s-cloud feature__icon"></i>
                    </a>
                    <div class="feature__text">
                        <video id="video" autoplay="autoplay" loop="loop" preload="auto" controls="controls" src="{% static 'img/vedio1.mp4' %}" poster="pre.jpg"
                            width="640" height="1280">
                            浏览器不支持该视频格式
                        </video>
                      <h3 class="feature__title bottom-line">iOS Apps</h3>
                      <p class="feature__text__paragraph">Gaze is a simple and elegant template with tons of features. Lorem ipsum dolor sit amet, consectetur.</p>
                    </div>
                  </div>
                </div> <!-- end feature item -->

                <div class="feature feature--transparent text-center">
                  <div class="feature__base feature--border">
                    <a href="#" class="feature__icon-holder">
                      <i class="pe-7s-diamond feature__icon"></i>
                    </a>
                    <div class="feature__text">
                      <h3 class="feature__title bottom-line">Web Design</h3>
                      <p class="feature__text__paragraph">Gaze is a simple and elegant template with tons of features. Lorem ipsum dolor sit amet, consectetur.</p>
                    </div>
                  </div>
                </div> <!-- end feature item -->

                <div class="feature feature--transparent text-center">
                  <div class="feature__base feature--border">
                    <a href="#" class="feature__icon-holder">
                      <i class="pe-7s-shopbag feature__icon"></i>
                    </a>
                    <div class="feature__text">
                      <h3 class="feature__title bottom-line">eCommerce</h3>
                      <p class="feature__text__paragraph">Gaze is a simple and elegant template with tons of features. Lorem ipsum dolor sit amet, consectetur.</p>
                    </div>
                  </div>
                </div> <!-- end feature item -->

                <div class="feature feature--transparent text-center">
                  <div class="feature__base feature--border">
                    <a href="#" class="feature__icon-holder">
                      <i class="pe-7s-graph2 feature__icon"></i>
                    </a>
                    <div class="feature__text">
                      <h3 class="feature__title bottom-line">Marketing</h3>
                      <p class="feature__text__paragraph">Gaze is a simple and elegant template with tons of features. Lorem ipsum dolor sit amet, consectetur.</p>
                    </div>
                  </div>
                </div> <!-- end feature item -->

              </div>
            </div>

          </div>
        </div> <!-- end services -->

        <!-- Project 1 -->
        <div class="section hero bg-img" style="background-image: url({% static 'img/hero/hero_6_3.jpg' %})">
            {% include "charts.html" %}
          <div class="container-fluid no-padding">
            <div class="fullpage-project-body">
              <div class="work-item__description">
                <h3 class="work-item__title"><a href="#">Design Workshop</a></h3>
                <span class="work-item__text">
                  Product design for professional clients.
                </span>
              </div>
            </div>
          </div>
        </div> <!-- end project 1 -->

        <!-- Project 2 -->
        <div class="section hero bg-img" style="background-image: url({% static 'img/hero/hero_6_4.jpg' %})">
          <div class="container-fluid no-padding">
            <div class="fullpage-project-body">
              <div class="work-item__description">
                <h3 class="work-item__title"><a href="#">Frozen Forest</a></h3>
                <span class="work-item__text">
                  Photo session of the winter outfit.
                </span>
              </div>
            </div>
          </div>
        </div> <!-- end project 2 -->

        <!-- Contact -->
        <div class="section hero bg-img" style="background-image: url({% static 'img/hero/hero_6_5.jpg' %})">
          <div class="container pt-sm-60">
            <div class="hero__outer">
              <div class="hero__inner text-center">

                <div class="heading-row text-center">
                  <h2 class="heading heading--lg">Contact Us</h2>
                  <p class="subheading white hidden-xs">Feel free to contact us or visit us at our office anytime.
                  </p>
                </div>

                <div class="contact-item">
                  <address>California CA Clark Inc. 48793 Star Apple</address>
                  <p>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
                </div> <!-- end address -->

                <div class="contact-item">
                  <span class="contact-item__title">Phone:</span>
                  <a href="tel:+64-93-310-70-50" class="contact-item__phone">+64 93 310 70 50</a>              
                </div> <!-- end phone -->

                <div class="contact-item">
                  <span class="contact-item__title">Email:</span>
                  <a href="mailto:hello@support.com" class="contact-item__email">hello@support.com</a>
                </div> <!-- end email -->

                <div class="social-icons social-icons--nobase social-icons--white mt-50">
                  <a href="#"><i class="ui-twitter"></i></a>
                  <a href="#"><i class="ui-facebook"></i></a>
                  <a href="#"><i class="ui-linkedin"></i></a>
                  <a href="#"><i class="ui-instagram"></i></a>
                </div>

              </div>           
            </div>
          </div>
        </div> <!-- end contact -->
      </div> <!-- end fullpage -->


    </div> <!-- end content wrapper -->
  </main> <!-- end main wrapper -->
  

  <!-- jQuery Scripts -->

  <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/plugins.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/scripts.js' %}"></script>


    
</body>
</html>